import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Modal,
    List,
    Button,

} from 'antd-mobile';
import { connect } from 'dva';
import {routerRedux} from "dva/router";
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";
import MyScroll from '../../components/MyScroll/MyScroll';
import {goto_search_title} from "../storesShow/GoSearch.less";
import {parse} from "query-string";
import {goto_search_body} from "../search/GotoSearch.less";



class FilterOrder extends Component {
    constructor(props){
        super(props);
        this.state={
            value: parse(props.location.search).showKeyword ==undefined ? "" : parse(props.location.search).showKeyword ,
            arr:[],

        }

    }



    componentDidMount(){
        this.props.dispatch({ type: 'storesShow/getstoresEFF', obj:{ id:this.props.match.params.id },
        })

    }
    onSubmit = (value) => {
        let history = window.localStorage.getItem('memberIdHistory');
        // console.log(history);
        if(!!history){
            let arr = JSON.parse(history);
            // console.log(arr);
            if(value!=''){
                arr.unshift(value);
                let array = Array.from(new Set(arr));
                if(array.length>10){
                    let newArr =  array.slice(0,10);
                    window.localStorage.setItem('memberIdHistory',JSON.stringify(newArr));
                }else {
                    window.localStorage.setItem('memberIdHistory',JSON.stringify(array));
                }
            }
        }else {
            let arr=[];
            arr.push(value);
            window.localStorage.setItem('memberIdHistory',JSON.stringify(arr));
        }
        if(this.props.match.params.data==0) this.props.dispatch(routerRedux.replace(`/searchOrder/${encodeURIComponent(value)}`));
        else this.props.dispatch(routerRedux.replace(`/groupSearch/${encodeURIComponent(value)}`));

    }

    onChange = (e) => {
        this.setState({
            value: e.target.value
        });
    };
    render() {
        let { arr, value } = this.state;

        return (
            <Flex style={{
                height:"100%"
            }} direction="column">
                <Flex className={ goto_search_title }>
                    {/*<Icon type='left' style={{ paddingLeft:'0.1rem' }} onClick={() => this.props.router.goBack()}/>*/}
                    <Flex className="search_input">
                        <form action="" onSubmit={ (e)=>{ this.onSubmit(value),e.preventDefault(); } }>
                            <input placeholder="请输入关键字搜索" autoFocus type="search" value={ value } onChange={this.onChange} />
                        </form>
                        <Icon className="search_icon" style={ value.length > 0 ? { color:"#fff" } : {} } type="search" size="md" />
                    </Flex>
                    {
                        value.length > 0 ?
                            <div className="search_cancelbtn" onClick={ ()=>{ this.onSubmit(value) } }>搜索
                            </div> :
                            <div className="search_cancelbtn" onClick={() => { this.props.dispatch(routerRedux.goBack()); }}>取消
                            </div>
                    }
                </Flex>
                {/*<MyScroll>*/}
                    {/*<div className={ goto_search_body }>*/}
                        {/*<Flex justify="between" className="search_history">*/}
                            {/*<div>热门搜索</div>*/}
                            {/*/!*{*!/*/}
                            {/*/!*arr.length>0 ?  <Flex*!/*/}

                            {/*/!*onClick={() => alert('提示', '确定删除全部记录？', [*!/*/}
                            {/*/!*{ text: '取消', onPress: () => {} },*!/*/}
                            {/*/!*{ text: '确定', onPress: () => {*!/*/}
                            {/*/!*window.localStorage.removeItem('memberIdHistory');*!/*/}
                            {/*/!*this.setState({*!/*/}
                            {/*/!*arr:[]*!/*/}
                            {/*/!*})*!/*/}
                            {/*/!*} },*!/*/}
                            {/*/!*])}*!/*/}
                            {/*/!*>*!/*/}

                            {/*/!*</Flex> :''*!/*/}
                            {/*/!*}*!/*/}
                        {/*</Flex>*/}

                        {/*{*/}
                            {/*list.length>0 ? <Flex wrap="wrap" style={{ paddingBottom:"0.3rem" }} justify="around">*/}
                                    {/*{*/}
                                        {/*list.map((v,i,a)=>{*/}
                                            {/*return <div onClick={()=>{ this.onSubmit(v.keyWord) }} className="search_history_item" key={i}>*/}
                                                {/*{v.keyWord}*/}
                                            {/*</div>*/}
                                        {/*})*/}
                                    {/*}*/}
                                {/*</Flex> :*/}
                                {/*<div style={{ textAlign:'center', margin:'1rem 0rem' }}>*/}
                                    {/*无搜索历史*/}
                                {/*</div>*/}

                        {/*}*/}
                    {/*</div>*/}


                    {/*<div style={{ width:"100%", height:"0.2rem", backgroundColor:"#F7F7F7" }} ></div>*/}
                    {/*<div className={ goto_search_body }>*/}
                        {/*/!*<WingBlank>历史搜索</WingBlank>*!/*/}
                        {/*<Flex justify="between" className="search_history">*/}
                            {/*<div>历史搜索</div>*/}
                            {/*{*/}
                                {/*arr.length>0 ?  <Flex*/}
                                    {/*// className="history_delect"*/}
                                    {/*onClick={() => alert('提示', '确定删除全部记录？', [*/}
                                        {/*{ text: '取消', onPress: () => {} },*/}
                                        {/*{ text: '确定', onPress: () => {*/}
                                                {/*window.localStorage.removeItem('memberIdHistory');*/}
                                                {/*this.setState({*/}
                                                    {/*arr:[]*/}
                                                {/*})*/}
                                            {/*} },*/}
                                    {/*])}*/}
                                {/*>*/}
                                    {/*<Icon type={cartdelect.id} />*/}
                                {/*</Flex> :''*/}
                            {/*}*/}
                        {/*</Flex>*/}

                        {/*{*/}
                            {/*arr.length>0 ?    <Flex wrap="wrap" justify="around">*/}
                                    {/*{*/}
                                        {/*arr.map((v,i,a)=>{*/}
                                            {/*return <div onClick={()=>{ this.onSubmit(v) }} className="search_history_item" key={i}>*/}
                                                {/*{v}*/}
                                            {/*</div>*/}
                                        {/*})*/}
                                    {/*}*/}
                                {/*</Flex> :*/}
                                {/*<div style={{ textAlign:'center', margin:'1rem 0rem' }}>*/}
                                    {/*无搜索历史*/}
                                {/*</div>*/}

                        {/*}*/}

                    {/*</div>*/}

                {/*</MyScroll>*/}
            </Flex>
        )
    }
}
export default connect(({ storesShow }) => ({ storesShow }))(FilterOrder);
